let layerIndex;
/**
 * 弹出学生新增/更新对话框
 */
function showStudenDlg(id){
    // 新增：每次打开对话框时启用按钮
    $("#btnOK").prop("disabled", false).removeClass("layui-btn-disabled");
    let title="新增学生"
    if(id){
        //是编辑
        title="编辑学生"
        $("#formId").css("display","block");
        //读取学生信息并赋值
        $.ajax({
            url:"/api/student/"+id,
            method:"GET"
        }).done(result=>{
            console.log(result)

            //遍历result对象并将值填充到#studForm表单中
            $.each(result,function(key,value){
                //修改选择器，确保选择的是#studForm内的字段
                var field = $('#studForm [name="' + key + '"]');
                if(field.is(':radio')) {
                    field.filter('[value="' + value + '"]').prop('checked', true);
                }else if(field.is(':checkbox')) {
                    field.prop('checked', value === "yes");//选中复选框
                }else {
                    field.val(value);//填充文本框或其他字段
                }
            });
        })

    }else{
        //是新增
        $("#studForm")[0].reset();
        $("#formId").css("display","none");
    }

    layerIndex = layer.open({
        type:1,
        title:title,
        area:['520px','auto'],
        content:$("#studForm")
    });








}





function getSearchCondtion()  {

    let formData ={}
    //遍历每个输入元素，将其值存储到formData对象中
    $('#queryForm').find('input,select').each(function() {
        let name = $(this).attr('name'); //提取元素的name属性
        let value = $(this).val(); //获取元素值

        //只有name属性存在且不为空才会添加到formData中
        if (name && value) {
            formData[name] = value;
        }
    });

    return formData

}

layui.use(function() {
    //新增学生需要进行
    //(1) 验证表单是否合法
    layui.form.on('submit(stud-dlg)', function (data) {
        event.preventDefault();//阻止表单默认提交
        commitStuDlg();
    })

    //(2)表格初始化

    const table = layui.table;
    let student = getSearchCondtion();

    //创建渲染实例
    table.render({
        elem: '#tbStudent',
        url: '/api/student/getbypage', //此处为静态值拟数据，实际使用时需换成接口

        method: "POST",
        contentType: 'application/json', //确保以JSON格式发送
        where: {"data": student},

        page: true,
        cols: [[
            {type: 'checkbox', fixed: 'left'},
            {field: 'id', fixed: 'left', width: 80, title: 'id', sort: true},
            {field: 'name', title: '姓名'},
            {
                field: 'sno',
                title: '学号',

                width: 150,
            },
            {
                field: 'sex', width: 80, title: '性别', sort: true,
                templet: d => d.sex === 1 ? '男' : (d.sex === 2 ? '女' : '未知'),
            },

            {field: 'age', width: 100, title: '年龄', sort: true},

            {fixed: 'right', title: '操作', width: 134, minWidth: 125, templet: '#editTemplate'}
        ]],
        done: function (rs) {
            //console.log(rs)
        }
    });


    //触发单元格工具事件
    table.on('tool(tbStudent)',function(obj){

        var data = obj.data;//获得当前行数据
        //console.log(obj)
        if(obj.event === 'edit'){
            layer.open({
                title:'编辑 - id:' + data.id,
                type:1,
                area:['80%','80%'],
                content:'<div style="padding:16px;">自定义表单元素</div>'
            });
        }
    });

// // 触发单元格工具事件
//     table.on('tool(tbStudent)', function(obj) {
//         var data = obj.data; // 获得当前行数据
//         if (obj.event === 'edit') {
//             // 调用编辑对话框并传递学生ID
//             showStudenDlg(data.id);
//         }
//     });
//










});

function search() {
    let student = getSearchCondtion();

    const table = layui.table;
    table.reloadData("tbStudent",{
        where:{data:student}
    });
    console.log("where condition:"+JSON.stringify(student))
}


// function deleteConfirm(){
//     const table = layui.table;
//     //获取表格的选中状态
//     const checkStatus = table.checkStatus('tbStudent');
//     console.log(checkStatus)
// }






function deleteConfirm() {
    const table = layui.table;
    const checkStatus = table.checkStatus('tbStudent');
    const data = checkStatus.data;

    if (data.length === 0) {
        layer.msg('请选择要删除的学生记录', { icon: 5 });
        return;
    }

    layer.confirm(`确定要删除选中的 ${data.length} 条记录吗？`, {
        icon: 3,
        title: '删除确认'
    }, function (index) {
        // 单条删除的 Promise 数组
        const deletePromises = data.map(item => {
            return $.ajax({
                url: `/api/student/delete/${item.id}`,
                method: 'DELETE'
            });
        });

        // 并行执行所有删除请求
        Promise.all(deletePromises)
            .then(() => {
                layer.msg('删除成功', { icon: 6 });
                table.reload('tbStudent');
            })
            .catch(error => {
                layer.msg('删除失败：' + error.statusText, { icon: 5 });
                console.error('删除失败', error);
            })
            .finally(() => {
                layer.close(index);
            });
    });
}






function commitStuDlg() {
    let id = $("#id").val()
    let formData = $("#studForm").serialize();
    if (id != null && id != "") {
        //是更新学生
        $.ajax({
            url: "/api/student/update",
            method: "PUT",
            data: formData
        }).done(result => {
            console.log(result);
            if (result.id) {

                //读取并刷新原来的学生列表
                loadStudentList();

                //关闭弹出层
                console.log("add success!")
                if (layerIndex)
                    layer.close(layerIndex)
            }

        }).fail((jqXHR, textStatus, errorThrown) => {
            console.error("Request failed:" + textStatus + "-" + errorThrown);
            alert("An error occurred.Please try again.");
        });
    } else {
        //新增学生需要进行
        //将表单数据发送到服务器的insert中，提交按钮变灰

        $.ajax({
            url: "/api/student/add",
            method: "POST",
            data: formData
        }).done(result => {
            console.log(result);
            if (result.id) {

                //读取并刷新原来的学生列表
                loadStudentList();

                //关闭弹出层
                console.log("add success!")
                if (layerIndex)
                    layer.close(layerIndex)
            }

        }).fail((jqXHR, textStatus, errorThrown) => {
            console.error("Request failed:" + textStatus + "-" + errorThrown);
            alert("An error occurred.Please try again.");
        });
    }
    $("#btnOK").prop("disabled", true).addClass("layui-btn-disabled");
}

function deleteById(id) {
    //删除
    layer.confirm('你真的要删除吗？一旦删除，不可恢复', {icon: 3}, function () {
        $.ajax({
            url: "/api/student/delete/" + id,
            method: "DELETE"
        }).done(result => {
            loadStudentList();
        })
        layer.closeAll();//关闭所有层
    }, function () {
    });
}





$(function (){
    loadStudentList();
});

function loadStudentList(){
    $.ajax({

        url:"/api/student/list"

    }).done(function(data){

        //console.log(data)
        let html="";
        data.forEach((element, index)=>{
            html+="<tr>"

            html+="<td>"+element.id+"</td>"
            html+="<td>"+element.name+"</td>"
            html+="<td>"+element.sno+"</td>"
            html+="<td>"+element.sclass+"</td>"
            html+="<td>"+element.gender+"</td>"
            html+="<td>"+element.age+"</td>"

            html+="<td> <a href='#' onclick='showStudentDlg("+element.id
                +")'>编辑</a> &nbsp;&nbsp;<a href='#' onclick='deleteById("+
                element.id+")'>删除</a> </td>"

            html+="</tr>"
        })
        $("#studentTb").html(html)

    });
}





